<!--
 * @Author: wuzhen
 * @Date: 2020-01-13 13:45:12
 * @LastEditors: wuzhen
 * @LastEditTime: 2020-04-18 14:57:55
 * @Description: 聊天室
 -->
<template>
  <div class="chat">
    <!-- sider -->
    <chat-sider @on-click="onMessage"></chat-sider>
    <div class="chat-con">
      <wz-load @on-reload="onReload" ref="wzLoad" v-if="isLoading" />
      <template v-else-if="chatInfo.secretstatus === 20 && isSecret">
        <div class="chat-secret">
          <Input v-model="secretTxt" maxlength="100" show-word-limit :autosize="{ minRows: 5 }" type="textarea" :placeholder="$t('secretInput')" style="width: 100%" />
          <div class="secret-btn">
            <Button class="custom" type="primary" long @click.stop="onSecret">{{
              $t("btn_submit")
            }}</Button>
          </div>
          <p class="secret-tips">
            {{ $t("secretTips") }}
          </p>
        </div>
      </template>
      <template v-else-if="chatInfo.id">
        <div class="chat-con-top">
          <div class="user-info">
            <div class="user-img" :style="{ cursor: chatInfo.msgkind === 10 ? '' : 'pointer' }" @click.stop="showInfo">
              <img :src="icon_notice" v-if="chatInfo.msgkind === 10" style="width:100%" />
              <img :src="require('@/assets/image/icon_group.png')" v-else-if="chatInfo.grouptype === 20" style="width:100%" />
              <wz-img :type="chatInfo.msgkind === 20 ? 'face' : 'group'" :src="chatInfo.face" v-else />
            </div>
            <span @click.stop="showInfo" :style="{ cursor: chatInfo.msgkind === 10 ? '' : 'pointer' }">{{
                chatInfo.msgkind === 10 ? $t("announcement") : chatInfo.name
              }}</span>
            <span class="onlinestatus" v-if="chatInfo.msgkind === 20">{{
              onlinestatus ? $t("chat_online") : $t("chat_offline")
            }}</span>
            <span v-else-if="chatInfo.msgkind === 30">({{ chatInfo.usernum }})</span>
          </div>
        </div>
        <chat-msg ref="chatMsg"></chat-msg>
        <chat-tool ref="chatTool" v-if="chatInfo.msgkind !== 10"></chat-tool>
      </template>
      <template v-else>
        <img :src="logoImg" class="logo-img" />
      </template>
    </div>
    <!-- 个人信息 -->
    <user-info :left="userLeft" :top="userTop" @on-close="onCloseUserInfo" ref="userInfo" v-show="showUserInfo"></user-info>
    <!-- 群组信息 -->
    <group-info :left="userLeft" :top="userTop" @on-close="onCloseUserInfo" ref="groupInfo" v-show="showGroupInfo"></group-info>
  </div>
</template>
<script>
import ChatSider from "./components/ChatSider";
import ChatMsg from "./components/ChatMsg";
import ChatTool from "./components/ChatTool";
import UserInfo from "@/components/UserInfo/index.vue";
import GroupInfo from "@/components/GroupInfo/index.vue";
import { mapGetters } from "vuex";
import { Input, Button, Message } from "view-design";
export default {
  components: {
    UserInfo,
    GroupInfo,
    ChatSider,
    ChatMsg,
    ChatTool,
    Input,
    Button
  },
  data() {
    return {
      logoImg: require("@/assets/image/logo_chat.png"),
      icon_notice: require("@/assets/image/icon_notice.png"),
      userLeft: 280,
      userTop: 100,
      showUserInfo: false,
      showGroupInfo: false,
      isLoading: false,
      isSecret: true,
      secretTxt: ""
    };
  },
  computed: {
    ...mapGetters(["isClearMsg", "onlineUserIds"]),
    // 是否在线
    onlinestatus() {
      return (
        this.onlineUserIds.length &&
        this.onlineUserIds.find(v => v === this.chatting.id)
      );
    },
    // 当前聊天人信息
    chatInfo() {
      // 判断是否存在
      const groupObj = this.groups.find(v => v.id === this.chatting.id);
      const friendObj = this.friends.find(v => v.id === this.chatting.id);
      if (!groupObj && !friendObj && this.chatting.msgkind !== 10) {
        return {};
      } else if (this.chatting.msgkind === 30) {
        return this.groups.find(v => v.id === this.chatting.id) || {};
      } else if (this.chatting.msgkind === 20) {
        return this.friends.find(v => v.id === this.chatting.id) || {};
      } else {
        return this.chatting;
      }
    }
  },
  created() {
    const friendIds = this.friends.map(v => v.id);
    const groupIds = this.groups.map(v => v.id);
    // const sys = this.chatUsers.filter(v => v.id === 1);
    // const groups = this.chatUsers.filter(v => groupIds.includes(v.id));
    // const friends = this.chatUsers.filter(v => friendIds.includes(v.id));
    const chatUsers = [];
    this.chatUsers.forEach(v => {
      if (groupIds.includes(v.id) || friendIds.includes(v.id) || v.id === 1) {
        chatUsers.push(v);
      }
    });
    // const chatUsers = this.chatUsers.filter(v => v.id);
    // this.set_chatUsers([...groups, ...friends, ...sys]);
    this.set_chatUsers([...chatUsers]);
  },
  methods: {
    // 查看聊天消息
    async onMessage(data) {
      this.isSecret = true;
      this.secretTxt = "";
      this.isLoading = true;
      if (
        data.msgkind === 30 &&
        !this.groups.find(v => v.id === this.chatting.id).groupMember
      ) {
        await this.getGroupMemberData(data.id);
        this.isLoading = false;
      } else {
        this.isLoading = false;
      }
    },
    // 重新加载
    async onReload() {
      this.isLoading = true;
      await this.getGroupMemberData(this.chatInfo.id);
      this.isLoading = false;
    },
    showInfo() {
      if (this.chatInfo.msgkind === 10) return;
      this.$bus.$emit("hideBookPopup");
      this.$bus.$emit("hideBookSiderPopup");
      if (this.chatInfo.msgkind === 20) {
        this.showUserInfo = true;
        this.$refs["userInfo"].getData(this.chatting.id);
      } else if (this.chatInfo.msgkind === 30) {
        this.showGroupInfo = true;
        this.$refs["groupInfo"].getData(this.chatting.id);
      }
    },
    onCloseUserInfo() {
      this.showUserInfo = false;
      this.showGroupInfo = false;
    },
    openMenu(e) {
      this.left = e.clientX - 180;
      this.top = 30;
    },
    // 提交密信
    onSecret() {
      if (this.secretTxt !== this.chatInfo.secret) {
        Message.error(this.$t("secretToast"));
        return;
      }
      this.isSecret = false;
      this.secretTxt = "";
    }
  },
  watch: {
    chatInfo(newVal) {
      if (newVal.msgkind === 30) {
        this.onMessage(newVal);
      }
      if (!newVal.id && this.chatting.id) {
        const currentIndex = this.chatUsers.findIndex(
          v => v.id === this.chatting.id
        );
        this.set_chatting({});
        this.chatUsers.splice(currentIndex, 1);
        this.set_chatUsers(this.chatUsers);
      }
    },
    isClearMsg(newVal, oldVal) {
      console.log(newVal, oldVal);
    }
  }
};
</script>
<style lang="less" scoped>
.chat {
  display: flex;
  height: 100%;
  &-secret {
    width: 320px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding-bottom: 80px;
    .secret {
      &-btn {
        margin: 20px auto;
        .custom {
          background: linear-gradient(
            90deg,
            rgba(249, 195, 78, 1),
            rgba(248, 158, 39, 1)
          );
          border-color: #f8a42b;
          color: #fff;
          width: 100%;
          height: 36px;
          line-height: 36px;
          font-size: 16px;
          border-radius: 5px;
        }
      }
      &-tips {
        text-align: center;
        font-size: 12px;
        color: #f8a52c;
      }
    }
  }
  &-con {
    display: flex;
    flex-direction: column;
    width: 695px;
    position: relative;
    .logo-img {
      position: absolute;
      width: 83px;
      height: 75px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    &-top {
      .user-info {
        height: 52px;
        line-height: 52px;
        border-bottom: 1px solid #e1e3e8;
        padding: 0 15px;
        display: flex;
        align-items: center;
        font-size: 14px;
        .user-img {
          width: 38px;
          height: 38px;
          border-radius: 4px;
          margin-right: 10px;
          overflow: hidden;
        }
        span {
          font-size: 14px;
          &.onlinestatus {
            font-size: 12px;
            color: #999;
            margin-left: 10px;
          }
        }
      }
    }
  }
}
</style>
